import React, { useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import './index.less';
import { Button } from 'antd';
import { ChartsResize } from '@/untils/index';
import { Col, Row } from 'antd';

export default function index() {
  let myref = useRef<any>(null);
  const [num, setNum] = useState(300);
  // const option = {
  //   title: {
  //     //   text: 'Stacked Line'
  //   },
  //   tooltip: {
  //     trigger: 'axis',
  //   },
  //   legend: {
  //     data: ['新增客服', '新增游客', '新增会话'],
  //   },
  //   grid: {
  //     left: '3%',
  //     right: '4%',
  //     bottom: '3%',
  //     containLabel: true,
  //   },
  //   toolbox: {
  //     feature: {
  //       saveAsImage: {},
  //     },
  //   },
  //   xAxis: {
  //     type: 'category',
  //     boundaryGap: false,
  //     data: [
  //       '2023-02-01',
  //       '2023-02-05',
  //       '2023-02-09',
  //       '2023-02-13',
  //       '2023-02-17',
  //       '2023-02-21',
  //       '2023-02-25',
  //     ],
  //   },
  //   yAxis: {
  //     type: 'value',
  //   },
  //   series: [
  //     {
  //       name: '新增客服',
  //       type: 'line',
  //       stack: 'Total',
  //       data: [30, 25, 50, 60, num, 100, num],
  //     },
  //     {
  //       name: '新增游客',
  //       type: 'line',
  //       stack: 'Total',
  //       data: [],
  //     },
  //     {
  //       name: '新增会话',
  //       type: 'line',
  //       stack: 'Total',
  //       data: [],
  //     },
  //   ],
  // };

  useEffect(() => {
    var myChart = echarts.init(myref.current);
    const option = {
      title: {
        //   text: 'Stacked Line'
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['新增客服', '新增游客', '新增会话'],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
          '2023-02-01',
          '2023-02-05',
          '2023-02-09',
          '2023-02-13',
          '2023-02-17',
          '2023-02-21',
          '2023-02-25',
        ],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '新增客服',
          type: 'line',
          stack: 'Total',
          data: [30, 25, 50, 60, num, 100, num],
        },
        {
          name: '新增游客',
          type: 'line',
          stack: 'Total',
          data: [],
        },
        {
          name: '新增会话',
          type: 'line',
          stack: 'Total',
          data: [],
        },
      ],
    };
    option && myChart.setOption(option);
    ChartsResize(myChart)
     return ()=>{
      myChart.dispose()
     }
  }, [num]);

  return (
    <div>
      {/* <h3>客服总览</h3> */}
      <div className="con">
        <h3>数据统计</h3>
        <div className="content">
          <div className="left">
            <div className="top">
              <p>客服总数</p>
              <p>6</p>
            </div>
            <div className="top">
              <p>客服总数</p>
              <p>6</p>
            </div>
            <div className="top">
              <p>客服总数</p>
              <p>6</p>
            </div>
            <div className="top">
              <p>客服总数</p>
              <p>6</p>
            </div>
          </div>
          <div className="right">
            <p>版本信息</p>
            <div className="table">
              <Row className="row">
                <Col span={12}>项目名称</Col>
                <Col span={12}>宏烨找房在线客服系统</Col>
              </Row>
              <Row className="row">
                <Col span={12}>当前版本</Col>
                <Col span={12}>v1.0.1</Col>
              </Row>
              <Row className="row">
                <Col span={12}>主要特色</Col>
                <Col span={12}>方便部署/快速接入</Col>
              </Row>
            </div>
          </div>
        </div>
      </div>
      <div
        className="main"
        ref={myref}
        style={{ width: '100%', height: '400px' }}
      ></div>
      <Button
        onClick={() => {
          setNum(num + 100);
        }}
      >
        点我
      </Button>
    </div>
  );
}
